<script setup lang="ts">
  import { computed, ref, watch } from 'vue'
  import { Loading } from '@element-plus/icons-vue'

  const props = defineProps<{
    loading?: boolean
    type?: 'primary' | 'success' | 'warning' | 'error'
    height?: number
    disabled?: boolean
    paddingLr?: number
    isModal?: boolean
  }>()

  // 加载
  const btnLoading = ref(false)

  // 按钮的禁用状态
  const btnDisabled = ref(false)

  // 按钮类型
  const buttonType = ref<'primary' | 'success' | 'warning' | 'error'>('primary')

  /**
   * 内容的样式
   * 不用全局scss颜色变量，是因为用了没效果
   * 等后面排查原因
   */
  const contentStyle = computed(() => {
    const colors = {
      primary: 'color: #007cff',
      success: 'color: #00c0c0',
      warning: 'color: #e69103',
      error: 'color: #f56c6c',
    }

    return colors[buttonType.value]
  })

  /**
   * 加载图标的颜色
   * 不用全局scss颜色变量，是因为用了没效果
   * 等后面排查原因
   */
  const loadingIconColor = computed(() => {
    const colors = {
      primary: '#007cff',
      success: '#00c0c0',
      warning: '#e69103',
      error: '#f56c6c',
    }

    return colors[buttonType.value]
  })

  // 按钮容器样式
  const hButtonDivStyle = computed(() => {
    if (props.isModal) {
      return 'height: 30px; padding: 0 16px;'
    }
    return `height: ${props.height || 28}px; padding: 0 ${props.paddingLr || 10}px;`
  })

  // 按钮类名
  const hPlainButtonClass = computed(() => {
    if (props.disabled) {
      return `${buttonType.value}_disabled`
    }
    return buttonType.value
  })

  // 按钮取消聚焦事件
  const onCancelFocus = (e: Event) => {
    ;(e.target as HTMLButtonElement).blur()
  }

  watch(
    props,
    (value) => {
      if (typeof value.loading === 'boolean') {
        btnLoading.value = value.loading
      }

      if (typeof value.disabled === 'boolean') {
        btnDisabled.value = value.disabled
      }

      if (['primary', 'success', 'warning', 'error'].includes(value.type)) {
        buttonType.value = value.type
      }
    },
    { immediate: true },
  )
</script>

<template>
  <el-button
    :disabled="btnDisabled"
    class="h_plain_bg_button"
    :style="hButtonDivStyle"
    :class="hPlainButtonClass"
    :loading="btnLoading"
    @focus="onCancelFocus"
  >
    <div class="content" :style="contentStyle">
      <slot></slot>
    </div>

    <template #loading>
      <el-icon class="loading_icon" :color="loadingIconColor">
        <Loading />
      </el-icon>
    </template>
  </el-button>
</template>

<style scoped lang="scss">
  .h_plain_bg_button {
    border-radius: 2px;
    border-color: #dcdfe6;
    margin: 0;

    .content {
      display: flex;
      gap: 5px;
      align-items: center;
    }
  }

  .loading_icon {
    animation: loading-rotate 2s linear infinite;
  }

  .primary {
    background-color: rgba($primaryColor, 0.1);
    border-color: rgba($primaryColor, 0.2);

    .content {
      color: $primaryColor !important;
    }

    &:hover {
      background-color: $primaryColor;
      border-color: $primaryColor;

      .content {
        color: #fff !important;
      }
    }
  }

  .primary_disabled {
    background-color: rgba($primaryColor, 0.05);
    border-color: rgba($primaryColor, 0.1);

    .content {
      color: rgba($primaryColor, 0.4) !important;
    }

    &:hover {
      background-color: rgba($primaryColor, 0.05);
      border-color: rgba($primaryColor, 0.1);

      .content {
        color: rgba($primaryColor, 0.4) !important;
      }
    }
  }

  .success {
    background-color: rgba($secondColor3, 0.1);
    border-color: rgba($secondColor3, 0.2);

    .content {
      color: $secondColor3 !important;
    }

    &:hover {
      background-color: $secondColor3;
      border-color: $secondColor3;

      .content {
        color: #fff !important;
      }
    }
  }

  .success_disabled {
    background-color: rgba($secondColor3, 0.05);
    border-color: rgba($secondColor3, 0.1);

    .content {
      color: rgba($secondColor3, 0.4) !important;
    }

    &:hover {
      background-color: rgba($secondColor3, 0.05);
      border-color: rgba($secondColor3, 0.1);

      .content {
        color: rgba($secondColor3, 0.4) !important;
      }
    }
  }

  .error {
    background-color: rgba($deleteColor, 0.1);
    border-color: rgba($deleteColor, 0.2);

    .content {
      color: $deleteColor !important;
    }

    &:hover {
      background-color: $deleteColor;
      border-color: $deleteColor;

      .content {
        color: #fff !important;
      }
    }
  }

  .error_disabled {
    background-color: rgba($deleteColor, 0.05);
    border-color: rgba($deleteColor, 0.1);

    .content {
      color: rgba($deleteColor, 0.4) !important;
    }

    &:hover {
      background-color: rgba($deleteColor, 0.05);
      border-color: rgba($deleteColor, 0.1);

      .content {
        color: rgba($deleteColor, 0.4) !important;
      }
    }
  }

  .warning {
    background-color: rgba($secondColor2, 0.1);
    border-color: rgba($secondColor2, 0.2);

    .content {
      color: $secondColor2 !important;
    }

    &:hover {
      background-color: $secondColor2;
      border-color: $secondColor2;

      .content {
        color: #fff !important;
      }
    }
  }

  .warning_disabled {
    background-color: rgba($secondColor2, 0.05);
    border-color: rgba($secondColor2, 0.1);

    .content {
      color: rgba($secondColor2, 0.4) !important;
    }

    &:hover {
      background-color: rgba($secondColor2, 0.05);
      border-color: rgba($secondColor2, 0.1);

      .content {
        color: rgba($secondColor2, 0.4) !important;
      }
    }
  }
</style>
